<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script th:src="@{/echarts/echarts.min.js}"></script>
    <script th:src="@{/echarts/china.js}"></script>
    <script th:src="@{/echarts/jquery-1.11.1.min.js}"></script>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
</head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<body class="childrenBody">
<div id="app" style="display: flex;flex-flow: column;margin: 20 ">
    <scroll-view scroll-with-animation scroll-y="true" style="width: 100%;">
        <!-- 用来获取消息体高度 -->
        <view id="okk" scroll-with-animation>
            <!-- 消息 -->
            <view v-for="(x,i) in msgList" :key="i">
                <!-- 用户消息 头像可选加入-->
                <view v-if="x.my" style="display: flex;
                flex-direction: column;
                align-items: flex-end;">

                    <view style="width: 400rpx;margin-right: 50rpx;">
                        <view  class="layui-btn layui-btn-normal" style="border-radius: 35rpx;">
                            <text style="word-break: break-all;">{{x.msg}}</text>
                        </view>
                    </view>

                </view>
                <!-- 机器人消息 -->
                <view v-if="!x.my" style="display: flex;
                flex-direction: row;
                align-items: flex-start;">

                    <view style="width: 500rpx;margin-top: 30px">
                        <view class="layui-btn" style="border-radius: 35rpx;">
                            <text style="word-break: break-all;">{{x.msg}}</text>
                        </view>
                    </view>
                </view>
            </view>


            <view style="height: 130rpx;">

            </view>
        </view>

    </scroll-view>

    <!-- 底部导航栏 -->
    <view style="position: fixed;bottom:0px;width: 100%;display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;">
        <view style="font-size: 55rpx;display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;width: 75%;
    margin: 20;">

            <input v-model="msg" type="text" style="width: 75%;
            height: 45px;
            border-radius: 50px;
            padding-left: 20px;
            margin-left: 10px;background-color: #f0f0f0;" @confirm="sendMsg" confirm-type="search"
                placeholder-class="my-neirong-sm" placeholder="用一句简短的话描述您的问题" />
            <button @click="sendMsg" :disabled="msgLoad" style="height: 45px;
            width: 20%;;
    color: #030303;    border-radius: 2500px;">{{sentext}}</button>
        </view>
    </view>
    </view>
</div>
</body>
<script>
    const { createApp } = Vue
    createApp({
        data() {
            return {
                //你的chatgpt秘钥
                api: '',
                msgLoad: false,
                anData: {},
                sentext: '发送',

                animationData: {},
                showTow: false,
                msgList: [{
                    my: false,
                    msg: "你好！我是在线客服,请问有什么问题可以帮助您?"
                }],
                msgContent: "",
                msg: ""
            }
        },
        methods: {
            sendMsg() {

                // 消息为空不做任何操作
                if (this.msg == "") {
                    return 0;
                }
                this.sentext = '请求中'
                this.msgList.push({
                    "msg": this.msg,
                    "my": true
                })
                console.log(this.msg);
                this.msgContent += ('YOU:' + this.msg + "\n")
                this.msgLoad = true
                // 清除消息
                this.msg = ""
                axios.post('https://api.openai.com/v1/completions', {
                    prompt: this.msgContent, max_tokens: 2048, model: "text-davinci-003"
                }, {
                    headers: { 'content-type': 'application/json', 'Authorization': 'Bearer ' + this.api }
                }).then(res => {
                    console.log(res);
                    let text = res.data.choices[0].text.replace("openai:", "").replace("openai：", "").replace(/^\n|\n$/g, "")
                    console.log(text);
                    this.msgList.push({
                        "msg": text,
                        "my": false
                    })
                    this.msgContent += (text + "\n")
                    this.msgLoad = false
                    this.sentext = '发送'
                })

            },


        }
    }).mount('#app')
</script>
